﻿import QtQuick 2.9
import QtQuick.Controls 2.9


Rectangle {
    id: rect_uartConfigBox
    anchors.fill: parent
    Rectangle {
        id: rect_label_list
        width: parent.width / 2
        height: parent.height - (parent.height / 6)
        // border.color: "black"
        // border.width: 2
        Column {
            anchors.fill: parent
            Repeater {
                id: repeater_label
                anchors.fill: parent
                model: ["Port", "Baudrate", "Data Bit", "Stop Bit", "Parity Bit"]
                delegate: Label {
                    width: rect_label_list.width
                    height: rect_label_list.height / 5
                    text: modelData
                    verticalAlignment: Text.AlignVCenter
                    font.pointSize: 12
                    // font.family: "Segoe UI Semilight"
                    font.family: "Comic Sans MS"
                    leftPadding: 12
                    color: "#595959"
                }
            }
        }
    }
    Rectangle {
        id: rect_combobox_list
        anchors.left: rect_label_list.right
        width: parent.width / 2
        height: parent.height - (parent.height / 6)
        // border.color: "black"
        Rectangle {
            id: rect_combobox_1
            anchors.top: parent.top
            width: parent.width
            height: parent.height / 5
            // border.color: "black"
            MyComboBox {
                id: myCombobox_port
                anchors.centerIn: parent
                width: parent.width
                model: ListModel {
                    id: comModel
                }
                textRole: "COM"

                function updateCom() {
                    var comList = mQmlSerialPortService.availableList()
                    comModel.clear()
                    for (let i = 0; i < comList.length; i++) {
                        // console.log("comList[", i, "]:", comList[i])
                        // mQmlLogsBrowserService.log("Get Com List[ " + i + " ]: " + comList[i])
                        comModel.append({COM: comList[i]})
                    }
                    currentIndex = 0
                }
                onCurrentIndexChanged: {
                    if (comModel.count > 0) {
                        // console.log("onCurrentIndexChanged : ", currentIndex,
                        //             " comModel.get(currentIndex)[\"COM\"]:",
                        //             comModel.get(currentIndex)["COM"])
                        mQmlSerialPortService.portName = comModel.get(currentIndex)["COM"]
                    }
                }
                onPressedChanged: {
                    if (pressed === true) {
                        updateCom()
                    }
                }
                Component.onCompleted: {
                    updateCom()
                }
            }
        }
        Rectangle {
            id: rect_combobox_2
            anchors.top: rect_combobox_1.bottom
            width: parent.width
            height: parent.height / 5
            // border.color: "black"
            MyComboBox {
                id: myCombobox_baudrate
                anchors.centerIn: parent
                width: parent.width
                combobox.textRole: "baudrate"
                combobox.model: ListModel {
                    id: listModel_baudrate
                    ListElement { baudrate: 9600 }
                    ListElement { baudrate: 115200 }
                }
                onCurrentIndexChanged: {
                    mQmlSerialPortService.baudRate = Number(listModel_baudrate.get(currentIndex)["baudrate"])
                }
                Component.onCompleted: {
                    currentIndex = 0
                }
            }
        }
        Rectangle {
            id: rect_combobox_3
            anchors.top: rect_combobox_2.bottom
            width: parent.width
            height: parent.height / 5
            // border.color: "black"
            MyComboBox {
                id: myCombobox_databit
                anchors.centerIn: parent
                width: parent.width
                combobox.textRole: "bit"
                combobox.model: ListModel {
                    id: listModel_databit
                    ListElement { bit: 8 }
                    ListElement { bit: 7 }
                    ListElement { bit: 6 }
                    ListElement { bit: 5 }
                }
                onCurrentIndexChanged: {
                    mQmlSerialPortService.dataBit = Number(listModel_databit.get(currentIndex)["bit"])
                }
                Component.onCompleted: {
                    currentIndex = 0;
                }
            }
        }
        Rectangle {
            id: rect_combobox_4
            anchors.top: rect_combobox_3.bottom
            width: parent.width
            height: parent.height / 5
            // border.color: "black"
            MyComboBox {
                id: myCombobox_stopbit
                anchors.centerIn: parent
                width: parent.width
                combobox.textRole: "bit"
                combobox.model: ListModel {
                    id: listModel_stopbit
                    ListElement { bit: 1 }
                    ListElement { bit: 1.5 }
                    ListElement { bit: 2 }
                }
                onCurrentIndexChanged: {
                    mQmlSerialPortService.stopBit = Number(listModel_stopbit.get(currentIndex)["bit"])
                }
                Component.onCompleted: {
                    currentIndex = 0
                }
            }
        }
        Rectangle {
            id: rect_combobox_5
            anchors.top: rect_combobox_4.bottom
            width: parent.width
            height: parent.height / 5
            // border.color: "black"
            MyComboBox {
                id: myCombobox_parity
                anchors.centerIn: parent
                width: parent.width
                combobox.textRole: "bit"
                combobox.model: ListModel {
                    id: listModel_parity
                    ListElement { bit: "None" }
                    ListElement { bit: "Odd" }
                    ListElement { bit: "Even" }
                }
                onCurrentIndexChanged: {
                    mQmlSerialPortService.parity = listModel_parity.get(currentIndex)["bit"]
                }
                Component.onCompleted: {
                    currentIndex = 0
                }
            }
        }
    }
    Rectangle {
        width: parent.width
        height: parent.height / 6
        anchors.top: rect_label_list.bottom
        // border.color: "black"
        // Button {
        //     anchors.fill: parent
        //     text: "Get Port"
        // }
        Rectangle {
            id: rect_get_serialPort
            anchors.centerIn: parent
            width: parent.width
            height: parent.height - 7
            radius: 20
            color: "#dfffef"
            border.color: "white" //"#86dbce"
            property alias text: text_button.text
            Text {
                id: text_button
                anchors.centerIn: parent
                text: "Open Port"
                color: "#595959"
                font.family: "Comic Sans MS"
                font.pointSize: 12
                state: "closed"
                states: [
                    State {
                        name: "opened"
                        PropertyChanges {
                            target: text_button
                            text: "Close Port"
                        }
                    },
                    State {
                        name: "closed"
                        PropertyChanges {
                            target: text_button
                            text: "Open Port"
                        }
                    }
                ]
            }

            state: "MouseExited"
            states: [
                State {
                    name: "MouseEntered"
                    PropertyChanges {
                        target: rect_get_serialPort
                        border.color: "#86dbce"
                    }
                },
                State {
                    name: "MouseExited"
                    PropertyChanges {
                        target: rect_get_serialPort
                        border.color: "white"
                    }
                }
            ]
            transitions: [
                Transition {
                    PropertyAnimation {
                        property: "border.color"
                        duration: 200
                    }
                },
                Transition {
                    PropertyAnimation {
                        property: "border.color"
                        duration: 200
                    }
                }
            ]

            Connections {
                target: mQmlSerialPortService
                function onOpenedSerialPort() {
                    text_button.state = "opened"
                    myCombobox_port.enabled = false
                    myCombobox_baudrate.enabled = false
                    myCombobox_databit.enabled = false
                    myCombobox_stopbit.enabled = false
                    myCombobox_parity.enabled = false
                }
                function onClosedSerialPort() {
                    text_button.state = "closed"
                    myCombobox_port.enabled = true
                    myCombobox_baudrate.enabled = true
                    myCombobox_databit.enabled = true
                    myCombobox_stopbit.enabled = true
                    myCombobox_parity.enabled = true
                }
            }

            // PropertyAnimation {
            //     id: mouse_entered_animation
            //     target: rect_get_serialPort
            //     property: "border.color"
            //     from: "white"
            //     to: "#86dbce"
            //     duration: 200
            // }
            // PropertyAnimation {
            //     id: mouse_exited_animation
            //     target: rect_get_serialPort
            //     property: "border.color"
            //     from: "#86dbce"
            //     to: "white"
            //     duration: 200
            // }
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                hoverEnabled: true
                onClicked: {
                    // console.log("Get Port Button onClicked")
                    if (mQmlSerialPortService.openState === false) {
                        mQmlSerialPortService.open();
                    } else {
                        mQmlSerialPortService.close();
                    }
                }
                onEntered: {
                    // mouse_entered_animation.start()
                    rect_get_serialPort.state = "MouseEntered"
                }
                onExited: {
                    // mouse_exited_animation.start()
                    rect_get_serialPort.state = "MouseExited"
                }
                onPressed: {
                    rect_get_serialPort.color = "#97cdb6"
                }
                onReleased: {
                    rect_get_serialPort.color = "#dfffef"
                }
            }
        }
    }
}
